<template>
	<view>
		<!-- <NavBar text="健康管理"/> -->
		<view style="display: flex;">
			<view style="width: 109px;height: 110px;border: 1rpx solid #ccc;
			text-align: center;
			display: flex;
			flex-direction: column;
			justify-content: center;
			border-radius: 10px;margin-left: 10px;margin-top: 20px;margin-bottom: 20px;">
				<view>体 重</view>
				<view style="font-size: 12px;color: #ccc;margin-bottom: 10px;">（kg）</view>
				<view>65.3</view>


			</view>
			<view style="width: 109px;height: 110px;border: 1rpx solid #ccc;
			text-align: center;
			display: flex;
			flex-direction: column;
			justify-content: center;
			border-radius: 10px;margin-left: 10px;margin-top: 20px;margin-bottom: 20px;">
				<view>身 高</view>
				<view style="font-size: 12px;color: #ccc;margin-bottom: 10px;">（cm）</view>
				<view>160</view>


			</view>
			<view style="width: 109px;height: 110px;border: 1rpx solid #ccc;
			text-align: center;
			display: flex;
			flex-direction: column;
			justify-content: center;
			border-radius: 10px;margin-left: 10px;margin-top: 20px;margin-bottom: 20px;">
				<view>IBM</view>
				<view style="font-size: 12px;color: #ccc;margin-bottom: 10px;">肥胖</view>
				<view style="color: red;">22.5</view>


			</view>
		</view>
		<view  style="display: flex;flex-wrap: wrap;">
			<view v-for="item in list" :key="item.id" style="background-color: #fff;
				text-align: center;
				width: 20%;
				height: 56px; 
				margin-left: 15px;margin-bottom: 10px; 
				box-shadow:1px 1px 2px 1px #ccc;border-radius: 10px;display: flex;flex-wrap: wrap;">
				
				<image :src="item.url" mode="" style="
					margin-top: 5px;
					width: 39px;height: 30px;margin-left: 20px;"></image>
				<view style="font-size: 12px;margin-left: 30px;">{{item.text }}</view>
			</view>
		</view >
		<!-- <uni-grid :column="4" :square="false" :show-border="false">
			<uni-grid-item v-for="item in list" :key="item.id"
				
			</uni-grid-item>
		</uni-grid> -->


		<view style="background-color: #FFF;border-radius: 15px;margin: 10px;">
			<view style="display: flex;justify-content: space-between;">
				<p style="color: #006eff;" @click="gotoadd">手动添加</p>
				<p style="margin-right: 10px;">更多血压数据</p>
			</view>
			<view>
				<image src="@/static/images/u1833.png" mode="" style="width: 337px;height: 268px;"></image>
			</view>

		</view>

	</view>
</template>

<script>
	import NavBar from '@/components/NarBar.vue'
	export default{
		components:{
			NavBar
		},
		data() {
			return {
				list: [{
						url: '/static/images/xueya.png',
						text: '血压'
					},
					{
						url: '/static/images/xinlv.png',
						text: '心率'
					},
					{
						url: '/static/images/xueyang.png',
						text: '血氧'
					},
					{
						url: '/static/images/wendu.png',
						text: '体温'
					},
					{
						url: '/static/images/shuimian.png',
						text: '睡眠'
					},
					{
						url: '/static/images/xuetang.png',
						text: '血糖'
					},
					{
						url: '/static/images/bushu.png',
						text: '步数'
					},
					{
						url: '/static/images/yinshi.png',
						text: '饮食'
					},
				]

			}
		},
		methods: {
			gotoadd() {
				uni.navigateTo({
					url: '/pages/index/add',
				})
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}
</style>